<template>
  <!-- 实体分类及显示 -->
  <div class="rule-box">
    <div v-if="$route.query.name" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <div class="app-container hk-flex-column">
      <div class="app-container-bg">
        <TypeItem :data="tabs" @handleClick="handleClick" />
      </div>
      <div class="hk-container">
        <div class="hk-flex-bottom">
          <search-form
            :data="queryParams"
            :is-need-reset-extra-param="true"
            :field-list="filterInfo.fieldList"
            @handleSearch="handleQuery"
            @handleReset="resetQuery"
          />
          <el-row>
            <el-col :span="24">
              <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
            </el-col>
          </el-row>
        </div>

        <hk-table
          :loading="loading"
          :table-data="tableData"
          :table-columns="tableFieldList"
          :total="total"
          :show-pag="true"
          :operate="true"
          :show-index="true"
          :table-height="80"
          :operate-width="240"
          :query-params="queryParams"
          @changePage="changePage"
        >
          <template #status="scope">
            <span class="Inspan" :class="scope.row.status == 0 ? 'serious' : 'simple'">{{
              scope.row.status == 0 ? '异常' : '正常'
            }}</span>
          </template>
          <template #itemType="scope">
            <span>{{ scope.row.itemType == 1 ? '常量字典' : '引用字典' }}</span>
          </template>
          <template #operate="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </hk-table>
      </div>
    </div>
    <dataSourceDialog
      ref="dataSourceDialogRef"
      :title="title"
      :form="formDataSource"
      @handleSubmit="getDataSourceList"
    />
    <dataDialog ref="dataDialogRef" :title="title" :form="formData" @handleSubmit="initListPage" />
  </div>
</template>

<script>
import TypeItem from '@/components/Common/TypeItem'
import SearchForm from '@/components/HkSearchform'
import {
  getReferenceSourceList,
  getReferenceDataPage,
  getRefExternalDetail,
  getRefConstantDetail,
  delData, getCountData
} from '@/api/icp/associatedData'
import HkTable from '@/components/Hk-Table/index.vue'
import dataDialog from './dataDialog'
import dataSourceDialog from './dataSourceDialog'
import { REF_DATA_TYPE } from '@/constants'

export default {
  components: { HkTable, SearchForm, dataDialog, dataSourceDialog, TypeItem },
  data() {
    return {
      loading: false,
      tabIndex: 0,
      // 显示搜索条件
      showSearch: true,
      propsData: { value: 'id', label: 'itemName', checkStrictly: true, multiple: false },
      productData: [],
      tabs: [
        { name: '常量字典', itemType: 1, num: 0 },
        { name: '引用字典', itemType: 2, num: 0 }
      ],
      tableData: [],
      tableFieldList: [],
      dataTableList: [
        { label: '数据名称', param: 'itemName' },
        { label: '数据类型', param: 'itemType', type: 'slot' }
        // { label: '信息描述', param: 'itemDic' }
        // { label: '状态', param: 'status', type: 'slot' }
      ],
      total: 0,
      id: '0',
      queryParams: {
        current: 0,
        size: 10,
        itemName: '',
        itemType: null
      },
      filterInfo: {
        fieldList: [{ label: '关键字', type: 'input', field: 'itemName', maxlength: 20 }]
      },
      editInfo: {},
      formDataSource: {},
      formData: {},
      title: '新增',
      index: 0
    }
  },
  created() {
    this.tableFieldList = this.dataTableList
    this.initListPage()
  },
  methods: {
    show() {
      this.open = true
    },
    /**  获取关联数据源列表 */
    getDataSourceList() {
      this.loading = true
      this.queryParams.scrollToTop = true
      getReferenceSourceList(this.queryParams).then((res) => {
        this.tableData = res.list
        this.total = res.total
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    },
    initListPage() {
      this.getCountData()
      this.getDataList()
    },
    /**  查询统计数据*/
    getCountData() {
      getCountData().then((res) => {
        this.tabs.forEach(tab => {
          tab.num = res.find(o => o.itemType === tab.itemType)?.count || 0
        })
      })
    },
    /**  获取数据列表*/
    getDataList() {
      getReferenceDataPage(this.queryParams).then((res) => {
        this.tableData = res.list
        this.total = res.total
      })
    },
    /** 左侧列表点击事件*/
    handleClick(index, item) {
      this.queryParams.itemType = item?.itemType
      this.queryParams.current = 1
      this.index = index
      this.tableFieldList = this.dataTableList
      this.handleQuery()
    },
    /** 获取列表数据 */
    handleQuery(data) {
      this.queryParams.current = 1
      if (data?.itemName && data?.itemName !== '') {
        this.queryParams.itemName = data.itemName
      }
      this.getDataList()
    },
    /** 分页 */
    changePage(val) {
      this.queryParams = { ...this.queryParams, ...val, scrollToTop: true }
      this.getDataList()
    },
    /**  重置列表*/
    resetQuery(val) {
      this.queryParams.current = 1
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 新增 */
    handleAdd() {
      this.title = '新增'
      this.$refs.dataDialogRef.show()
    },
    /**  编辑按钮 */
    handleEdit(row) {
      if (row.itemType === REF_DATA_TYPE.EXTERNAL_QUERY) {
        getRefExternalDetail(row.id).then((res) => {
          this.formData = res
        })
      } else {
        getRefConstantDetail({ id: row.id, size: 10, current: 1 }).then((res) => {
          this.formData = res
        })
      }
      this.title = '编辑'
      this.$refs.dataDialogRef.show()
    },
    /** 删除按钮 */
    handleDelete(row) {
      const itemName = row.itemName
      const _self = this
      this.$modal
        .confirm('是否确认名称为"' + itemName + '"的数据项？')
        .then(function() {
          return delData(row.id)
        })
        .then(() => {
          _self.getDataList()
          _self.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin hk-flex {
  display: flex;
  justify-content: center;
}
.content{
  padding:0px;
  flex:1;
}

//重定义样式
.app-container {
  padding:0 !important;
  width: 100%;
  overflow: hidden !important;
  background: #eef0f5 !important;

  &.hk-flex {
    padding: 0;
    @include hk-flex;
    height: 100%;
    overflow: hidden;
    background: #eef0f5;
  }

  .hk-container {
    background: #fff;
    width: 100% !important;
    height: 100%;
    padding: 0 20px 10px;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .targetTable {
      flex: 1;
      overflow-y: hidden;
    }
  }
}
::v-deep .el-table {
  margin-top:0;
}
::v-deep .el-table__body-wrapper {
  // height: calc(100% - 50px) !important;
  // overflow: auto !important;
}
</style>
